<template>
  <div class="el-card">
    <div class="el-card__body">
      <el-form
        label-width="80px"
        size="small"
        style="display: flex; position: relative"
      >
        <el-form-item label="目录名称">
          <el-input
            style="width: 200px"
            v-model="queryParams.directoryName"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <!-- <el-input style="width: 200px"></el-input> -->
          <el-select
            v-model="queryParams.state"
            style="width: 200px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button style="margin-left: 15px" @click="clear">清除</el-button>
          <el-button type="primary" @click="btn">搜索</el-button>
        </el-form-item>
        <el-button
          size="small"
          type="success"
          icon="el-icon-edit"
          style="position: absolute; right: 0"
          @click="$refs.directorysAdd.showDialog = true"
          >新增目录</el-button
        >
      </el-form>
      <el-alert type="info" show-icon :closable="false">
        数据一共 <span>{{ total }}</span> 条
      </el-alert>
      <!-- 表格内容 -->
      <el-table :data="formData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期"> </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态" :formatter="stateFormat">
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <!-- 插槽 -->
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="mini"
              @click="row.state = !row.state"
              >{{ row.state == 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              :class="{ disabled: row.state == 1 }"
              type="text"
              size="mini"
              @click="$refs.directorysAdd.update(row)"
              >修改</el-button
            >
            <el-button
              :class="{ disabled: row.state == 1 }"
              type="text"
              size="mini"
              @click="del(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="ViewPager">
        <el-pagination
          @size-change="handleSizeChange"
          background
          @current-change="onPageChange"
          :current-page="queryParams.page"
          layout=" prev, pager, next,total, sizes, jumper"
          :page-sizes="[10, 15]"
          :page-size="queryParams.pagesize"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 放置组件 -->
    <directorys-add ref="directorysAdd" @done="getList" />
  </div>
</template>

<script>
import { list, remove } from "@/api/hmmm/directorys";
import directorysAdd from "../components/directorys-add.vue";
export default {
  components: {
    directorysAdd,
  },
  data() {
    return {
      queryParams: {
        pagesize: 10,
        page: 1,
        subjectID: null,
        directoryName: null,
        state: null,
      },
      formData: [],
      total: 0,
      options: [
        {
          value: 0,
          label: "禁用",
        },
        {
          value: 1,
          label: "启用",
        },
      ],
    };
  },
  created() {
    this.getList();
    console.log(this.$route.query);
    if (this.$route.query) {
      console.log(this.$route.query.id);
      console.log(this.$route.query.name);
      this.queryParams.subjectID = this.$route.query.id;
      // this.queryParams.directoryName = this.$route.query.name;
    }
    this.getList();
  },
  methods: {
    getList() {
      list(this.queryParams).then((res) => {
        console.log(res.data.items);
        this.formData = res.data.items;
        this.total = res.data.counts;
        // console.log(this.total);
      });
    },
    stateFormat(row, column) {
      // console.log(row.isFrontDisplay);
      if (row.state == 0) {
        return "已禁用";
      } else {
        return "已启用";
      }
    },
    onPageChange(newPage) {
      console.log(newPage);
      this.queryParams.page = newPage;
      this.getList();
    },
    handleSizeChange(newSize) {
      this.queryParams.pagesize = newSize;
      this.getList();
      console.log(newSize);
    },
    btn() {
      this.getList();
    },
    clear() {
      this.queryParams = {
        pagesize: 10,
        page: 1,
        directoryName: null,
        state: null,
      };
    },
    del(row) {
      console.log(row.id);
      this.$confirm("确认删除此目录")
        .then(() => {
          return remove(row);
        })
        .then(() => {
          this.$message.success("删除成功");
          if (this.formData.length == 1 && this.queryParams.page > 1) {
            this.queryParams.page--;
          }
          this.getList();
        });
    },
  },
};
</script>

<style scoped lang="scss">
.ViewPager {
  float: right;
  padding: 15px 0;
}
.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>
